<template>
  <div id="app">
    <!-- 头部-用户信息 -->
    <Topbar :key="keyVal"></Topbar>
    <!-- 头部-导航切换 -->
    <Header></Header>
    <router-view @updatekey="updatekeyFn"/>
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 登陆框 -->
    <Login v-if="isShowLoginModal"></Login>
    <!-- 提示框 -->
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>

    ==={{ isShowToast }}==
    <button @click="fn">点击</button>
  </div>
</template>
<script>
import Topbar from "@/components/Topbar";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Login from "@/components/Login";
import Toast from "@/components/Toast";

import { mapState } from "vuex";
//调用封装后的axios
// import request from "@/request/request.js";

import { JinpingAPI, RemenAPI } from "@/request/api";
export default {
  components: {
    Topbar,
    Header,
    Footer,
    Login,
    Toast,
  },
  data() {
    return {
      keyVal: 0,
    };
  },
  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.showModal.isShowLoginModal,
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  methods: {
    async fn() {
      // 写法一
      // axios
      //   .get("http://kumanxuan1.f3322.net:8881/cms/products/recommend")
      //   .then((res) => {
      //     console.log("请求的数据为：", res);
      //   });

      // 写法二
      // request
      //   .get("/products/recommend", {
      //     headers: {
      //       token: "abcd",
      //     },
      //   })
      //   .then((res) => {
      //     console.log("请求的数据为：", res);
      //   });

      // JinpingAPI().then((res) => {
      //   console.log("请求的数据为：", res);
      // });
      // RemenAPI().then((res) => {
      //   console.log("请求的数据为：", res);
      // });

      //3．必须是先请求完a再请求b然后再c。可能造成回调地狱的问题。
      // f解决: ·async-+· await··-用来解决异步·，可以使异步代码同步化。
      // 语法:-await-异步请求-( await-返回异步请求的结果。)
      //  await必须放在async修饰的函数内。

      let res = await JinpingAPI();
      console.log("res1:", res);

      let res2 = await RemenAPI();
      console.log("res2:", res2);
    },

    updatekeyFn(){
       this.keyVal++;
    }
  },

  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        //当页面刷新时默认也会触发当前handler() ,临时解决方案，当旧的地址为/时不要重载。
        if (oldVal != "/") {   // 如果等于  /  说明是页面刷新的
          console.log("路由器地址发生改变了");
          this.keyVal++;
        }
      },
    },
  },
};
</script>
<style lang="less">
//进入效果
.slide-enter,
.slide-leave-to {
  opacity: 0;
}
//过程中 过度效果
.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.5s linear;
}
//离开效果
.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
